<template>
	<view ref="dragwraps" id="dragwrap">
		<movable-area>
		  <view v-for="(v,i) in data" style="display: inline-block;">
		    <view class='item'  :id="v.index" @touchstart='touchs($event,i)' @touchend='touchend($event,i)' @touchmove='touchm($event,i)'>
		      <text>{{v.index}}</text>
		    </view>
		  </view>
		  <movable-view :x="x" :y="y" direction="all" :damping="5000" :friction="1" :disabled="disabled">
		    <view class='item-move' v-if='!hidden'>
		    </view>
		  </movable-view>
		</movable-area>
	</view>
</template>

<script>
	export default {
		data:() => ({
			dragwrapTopHeight:0,
			hidden:true,
			flag:false,
			x:0,
			y:0,
			data:[
				{ index: 1 },
				{ index: 2 },
				{ index: 3 },
				{ index: 4 },
				{ index: 5 },
				{ index: 6 },
				{ index: 7 },
				{ index: 8 },
				{ index: 9 },
				{ index: 10 },
				{ index: 11 },
				{ index: 12 },
				{ index: 13 },
			],
			disabled: true,
			elements:[]			
		}),
		props:{
			scrolltops:{
				type:Number,
				default:0
			},
			topheights:{
				type:Number,
				default:0
			}
		},
		methods:{
		  touchs:function($event,i){//触摸开始
			this.$emit('scrollviewhidden')
			  var e = $event
			this.x = e.currentTarget.offsetLeft
			this.y = e.currentTarget.offsetTop
			this.beginIndex = i
			setTimeout(()=>{
				this.hidden = false
				this.flag = true
			},10)
		  },  
		  touchend:function($event,ind){//触摸结束
			this.$emit('scrollviewvisbile')
			  var e = $event	
			if (!this.flag) {
			  return;
			}
			const x = e.changedTouches[0].pageX
			const y = e.changedTouches[0].pageY + this.scrolltops
			const list = this.elements;
			let data = this.data
			for(var j = 0; j<list.length; j++){
			  const item = list[j];
			  if(x>item.left && x<item.right && y>item.top && y<item.bottom){
				const endIndex = item.dataset.index || j;
				const beginIndexs = this.beginIndex;
				//向后移动
				if (beginIndexs < endIndex) {
				  let tem = data[beginIndexs];
				  for (let i = beginIndexs; i < endIndex; i++) {
					data[i] = data[i + 1]
				  }
				  data[endIndex] = tem;
				}
				//向前移动
				if (beginIndexs > endIndex) {
				  let tem = data[beginIndexs];
				  for (let i = beginIndexs; i > endIndex; i--) {
					data[i] = data[i - 1]
				  }
				  data[endIndex] = tem;
				}

				this.data = data
			  }
			}
			this.hidden = true
			this.flag = false
		  },  
		  touchm:function($event,i){//滑动
			var winwidth = uni.getSystemInfoSync().windowWidth
			  var e = $event
			if(this.flag){
			  const x = e.touches[0].pageX+20//650rpx宽为基础适当调整
			  const y = e.touches[0].pageY-(this.dragwrapTopHeight) + (44/750 * winwidth) + this.scrolltops
			  this.x = x - (150/750 * winwidth)
			  var tempnum = 0;
			  if(wx.getSetting){
				  this.y = y - (150/750 * winwidth)
			  }else{
				  this.y = y - (75/750 * winwidth)
			  }
			}
		  }
		},
		mounted(){
		  var _this = this
		  setTimeout(() => {
			  //拖拽部分
			  var query = uni.createSelectorQuery().in(this);
			  var nodesRef = query.selectAll(".item");
			  query.select('#dragwrap').boundingClientRect();//获取拖拽部分顶部的容器，与拖拽部分关联，防止错位
			  this.dragwrapTopHeight = this.topheights
			  nodesRef.fields({
				dataset: true,
				rect:true
			  },(result)=>{
				this.elements = result
			  }).exec(res => {
				setTimeout(()=>{
					// this.dragwrapTopHeight = this.topheights	
				},100)
			  })
			  //删除测试
			  setTimeout(function(){
				_this.data.splice(0,1)
			  },1500)
		  },500)
		}
	}
</script>

<style scoped>
	movable-area{
	  width: 100%;
	  height: 100%;
	}
	.item{
	  display: inline-block;
	  width: 173.25rpx;
	  height: 176.25rpx;
	  border: 1px solid red;
	  text-align: center;
	  line-height: 150rpx;
	}
	
	.index-first{
	  display: inline-block;
	  width: 15rpx;
	  height: 150rpx;
	  background: firebrick;
	}
	
	.item-move{
	  display: inline-block;
	  width: 176.25rpx;
	  height: 176.25rpx;
	  border: 1px solid blue;
	}
</style>
